<template>
    <div class="container">
      <t-layout>
        <t-aside style="width: auto">
          <t-menu theme="light" default-value="item2" :collapsed="collapsed" height="550px">
            <template #logo>
              <img :width="collapsed ? 35 : 136" :src="iconUrl" alt="logo" />
            </template>
            <t-menu-group title="主导航">
              <t-menu-item value="item1">
                <template #icon>
                  <t-icon name="app" />
                </template>
                仪表盘
              </t-menu-item>
            </t-menu-group>
            <t-menu-group title="组件">
              <t-submenu title="列表项" value="2-1">
                <template #icon>
                  <t-icon name="server" />
                </template>
                <t-menu-item value="2-1-1">基础列表项</t-menu-item>
                <t-menu-item value="2-1-2">卡片列表项</t-menu-item>
                <t-menu-item value="2-1-3">筛选列表项</t-menu-item>
                <t-menu-item value="2-1-4">树状筛选列表项</t-menu-item>
              </t-submenu>
              <t-menu-item value="2-2">
                <template #icon>
                  <t-icon name="edit-1" />
                </template>
                表单项
              </t-menu-item>
              <t-menu-item value="2-3">
                <template #icon>
                  <t-icon name="root-list" />
                </template>
                详情页
              </t-menu-item>
              <t-menu-item value="2-4">
                <template #icon>
                  <t-icon name="check" />
                </template>
                结果页
              </t-menu-item>
              <t-menu-group title="用户管理">
                <t-menu-item value="item3">
                  <template #icon>
                    <t-icon name="user" />
                  </template>
                  注册人员审批
                </t-menu-item>
              </t-menu-group>
            </t-menu-group>
            <template #operations>
            </template>
          </t-menu>
        </t-aside>
        <t-layout>
          <t-header>
            <div>
              <t-button class="t-demo-collapse-btn" variant="text" shape="square" @click="changeCollapsed">
                <template #icon><t-icon :name="changeicon" /></template>
              </t-button>
              <span>{{ listtext }}</span>
            </div>
            <div>
              横向导航标签
            </div>
          </t-header>
          <t-content>Content</t-content>
        </t-layout>
      </t-layout>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const changeicon = ref('arrow-left')
const listtext = ref('收起侧边栏')

const collapsed = ref(false)
const iconUrl = ref('https://tdesign.gtimg.com/site/baseLogo-light.png')

// eslint-disable-next-line no-unused-vars
const changeCollapsed = () => {
  collapsed.value = !collapsed.value
  iconUrl.value = collapsed.value
    ? 'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/logo%402x.png'
    : 'https://tdesign.gtimg.com/site/baseLogo-light.png'
  changeicon.value = collapsed.value
    ? 'arrow-right'
    : 'arrow-left'
  listtext.value = collapsed.value
    ? '展开侧边栏'
    : '收起侧边栏'
}

// eslint-disable-next-line no-unused-vars

</script>

<style scoped>
.container{
  width: 100vw;
  height: 100vh;
  display: flex;
}
</style>
